<template>
	<div id="app">
		<router-view />
	</div>
</template>

<script>
export default {
	name: 'App',
	created() {
		const handleColorSchemeChange = (e) => {
			if (e.matches) {
				import('highlight.js/styles/atom-one-dark.css')
			} else {
				import('highlight.js/styles/vs.css')
			}
		}
		const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
		darkModeMediaQuery.addEventListener('change', handleColorSchemeChange)
		handleColorSchemeChange(darkModeMediaQuery)
	}
}
</script>

<style lang="less">
.size {
	width: 100%;
	height: 100%;
}
html,
body {
	.size;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
#app {
	.size;
}
</style>
